<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card class="box-card">
      <!-- 搜索区域 -->
      <el-row :gutter="30">
        <el-col :span="8">
          <!-- 搜索框 -->
          <el-input
            placeholder="输入学生姓名查找"
            v-model="inputvalue.name"
            class="input-with-select"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getuserlist"
            ></el-button>
          </el-input>
        </el-col>
        <!-- 按钮 -->
        <el-col :span="5">
          <el-button type="primary" @click="dialogVisible = true"
            >添加用户</el-button
          >
        </el-col>
      </el-row>
      <!-- 列表区域 -->
      <el-table :data="userlist">
        <el-table-column type="index"></el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="性别" prop="sex"></el-table-column>
        <el-table-column label="学号" prop="id"></el-table-column>
        <el-table-column label="备注（登录密码）" prop="flog"></el-table-column>
        <el-table-column label="角色定位" prop="location"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 信息 -->
            <el-tooltip
              class="item"
              effect="dark"
              content="信息"
              placement="top"
            >
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click="getclasslist(scope.row)"
              ></el-button>
            </el-tooltip>
            <!-- 删除 -->
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="top"
            >
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="del(scope.row)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 添加弹框区域 -->
      <el-dialog title="添加" :visible.sync="dialogVisible" width="30%">
        <!-- 弹框表单 -->
        <span>
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="姓名">
              <el-input v-model="form.name" placeholder="输入学生姓名"></el-input>
            </el-form-item>

            <el-form-item label="性别">
              <el-input v-model="form.sex" placeholder="这里改成单选"></el-input>
            </el-form-item>

            <el-form-item label="学号">
              <el-input v-model="form.id"  placeholder="参考信科院学号格式"></el-input>
            </el-form-item>

            <el-form-item label="备注">
              <el-input v-model="form.flog" placeholder="学生选课密码"></el-input>
            </el-form-item>

            <el-form-item label="角色定位" >
              <el-input v-model="form.location" placeholder="xx级应届生"></el-input>
            </el-form-item>
          </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="add">添加</el-button>
        </span>
      </el-dialog>
      <!-- 详细信息弹框区域 -->
      <el-dialog title="学生信息" :visible.sync="usermessagehandle" width="50%">
        <!-- 详细信息 -->
        <span>
          <el-tabs>
            <!-- 课程信息 -->
            <el-tab-pane label="课程信息" name="first">
              <el-table :data="classlist">
                <el-table-column
                  label="课程序号"
                  prop="classId"
                ></el-table-column>
                <el-table-column
                  label="课程名"
                  prop="className"
                ></el-table-column>
                <el-table-column
                  label="教室"
                  prop="classPlace"
                ></el-table-column>
                <el-table-column label="状态" prop="state"></el-table-column>
                <el-table-column label="操作">
                  <template>
                    <el-button
                      type="danger"
                      icon="el-icon-delete"
                      circle
                      @click="messagecutclass"
                    ></el-button>
                  </template>
                </el-table-column>
              </el-table>
            
            </el-tab-pane>
           
            <!-- 学分信息 -->
            <el-tab-pane label="学分信息" name="second">
              总修学分：130<br />
              欠学分：120<br />
              学分绩：35.65
            </el-tab-pane>
          </el-tabs>
        </span>
      </el-dialog>
      <!-- 分页区域 -->
      <el-pagination layout="prev, pager, next" :total="50"> </el-pagination>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";
export default {
  data() {
    return {
      userlist: [],
      dialogVisible: false, //添加表单开关
      usermessagehandle: false, //详细信息弹框开关
      //输入框内容
      inputvalue: {
        name: "",
      },
      //表单数据
      form: {
        name: "",
        sex: "",
        id: "",
        flog:"",
        location: "",
      },
      // 课程信息
      classlist: [],
      addclass: false, //添加课程开关
      addclasscontent:{
        name:'',

      },//需要添加课程的双向绑定数据
    };
  },
  created() {
    this.reuserlist(); //加载用户数据
  },
   
  methods: {
    //添加数据
    add() {
      this.dialogVisible = false;
      axios
        .post("http://localhost:3000/add", qs.parse(this.form))
        .then((res) => {
          console.log(res);
        });
      this.$router.go(0);
    },
    //获取user列表
    reuserlist() {
      axios({
        url: "http://localhost:3000/user",
        method: "get",
      }).then((res) => {
        console.log(res);
        this.userlist = res.data;
      });
    },
    //重构userlist
    getuserlist() {
      axios
        .post("http://localhost:3000/reuser", qs.parse(this.inputvalue))
        .then((res) => {
          this.userlist = res.data;
        });
    },
    // 删除user
    del(row) {
      this.$confirm("此操作将永久删除该学生信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios
            .post("http://localhost:3000/delate", qs.parse(row))
            .then((res) => {
              console.log(res);
            });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.$router.go(0);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //获取学生课程信息
    getclasslist(row) {
      this.usermessagehandle = "true";
      axios
        .post("http://localhost:3000/getclass", qs.parse(row))
        .then((res) => {
          this.classlist = res.data;
        });
    },
    // 提示退课信息
       messagecutclass() {
        this.$message({
          message: '好好上课，退个锤子！',
          type: 'warning'
        });
      },
   
  },
};
</script>

<style>
.el-breadcrumb {
  margin-bottom: 15px;
}
.el-table {
  margin-top: 15px;
  margin-bottom: 15px;
}
</style>